@-webkit-keyframes heartpop {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes heartpop {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@mixin heartpop( $delay: .7s ) {
  -webkit-animation: heartpop 0.9s both;
  animation: heartpop 0.9s both;
  animation-delay: $delay;
  -webkit-animation-delay: $delay;
}

@mixin button() {
  font-size: .8em;
  font-weight: 600;
  padding: 6px 12px;
  transition: all .15s ease-in-out;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: .25rem;
  text-transform: uppercase;
  cursor: pointer;
  line-height: $line-height-base;
  font-family: inherit;
  &:hover {
    text-decoration: none;
    opacity: .9;
  }
}

@mixin button-secondary( $hover: 'true', $color: $gray-color ) {
  border: 1px solid $color;
  background-color: transparent;
  font-weight: 600;
  color: $color;
  &:hover {
    background: transparent;
  }
}

@mixin button-primary( $hover: 'true', $color: $button_color ) {
  background-color: $color;
  color: #fff;
  @if ($hover == 'true') {
    &:hover {
      text-decoration: none;
      background-color: $color;
      color: #fff;
      opacity: .9;
    }
  }
}
